<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

	<f:loadBundle basename="resources" var="msg" />
	<ui:composition template="/templates/template.xhtml" >
			
			<ui:define name="content">
	 		<h:form > 
			<rich:jQuery query="#{rich:component('idUsuario')}.focus()"></rich:jQuery>
	 		<div style="margin:40px auto;width:280px;">
		 		<rich:panel header="Autenticacion en el sistema">		 
		 			<div>
		 				<h:outputLabel for="idUsuario" style="width:70px;">
		 					Usuario
		 				</h:outputLabel>
		 				<h:inputText  id="idUsuario" style="width:180px" autocomplete="off" onfocus="#{rich:component('sug-login')}.callSuggestion(true)"  value="#{Login.usuario}"/>
		 	
					 	<rich:suggestionbox id="sug-login" suggestionAction="#{Login.usuarios}"
					 		var="usuario"
					 		fetchValue="#{usuario.idUsuario}"
					 		for="idUsuario">
					 	<h:column>
					 		#{usuario.nombreUsuario}
					 	</h:column>	
					 	<h:column>
					 		<h:graphicImage value="#{usuario.foto}" width="40"/>
					 	</h:column>
					 	</rich:suggestionbox>
		 			</div>			
					<div>
						<h:outputLabel for="passwordUsuario" style="width:70px;">
						Password:
						</h:outputLabel>
						<h:inputSecret id="passwordUsuario"  style="width:180px" value="#{Login.password}"/>
					</div>
					
				</rich:panel>
				<div style="float:right;"><h:commandButton value="Entrar" action="#{Login.entrar}"/></div>
			</div>
			</h:form>	
		</ui:define>
		
	</ui:composition>
</html>